<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组高阶函数使用(Use of high-order functions in arrays)</title>
  <!-- 
  在JavaScript中，高阶函数在数组操作中被广泛使用，尤其是通过数组的方法，如map 、 filter 、 reduce 、 forEach等。这些方法允许开发者以更简洁和易读的方式处理数组。

  一、常用的高阶函数
  1. map()  方法：
    -  map()  方法创建一个新数组，包含调用指定函数处理后的每个元素的结果。
    - 适用于需要对数组中的每个元素进行转换或处理的场景。
  2. filter()  方法：
    -  filter()  方法创建一个新数组，包含所有通过指定测试函数的元素。
    - 适用于需要从数组中筛选出符合条件的元素的场景。
  3. reduce()  方法：
    -  reduce()  方法对数组中的每个元素执行指定的归纳操作，将其归纳为单个值。
    - 适用于需要对数组进行累加、合并或计算的场景。
  4. forEach()  方法：
    -  forEach()  方法对数组中的每个元素执行指定的函数，通常用于执行副作用操作。
    - 适用于需要遍历数组但不需要返回新数组的场景。
  5. some()  和  every()  方法：
    -  some()  方法测试数组中是否至少有一个元素满足指定条件，返回布尔值。
    -  every()  方法测试数组中是否所有元素都满足指定条件，返回布尔值。
    - 适用于需要检查数组元素是否符合某种条件的场景。

  二、高阶函数的优势
  1. 简洁性：
    - 高阶函数使得代码更简洁，减少了循环和条件判断的需要。

  2. 可读性：
    - 使用高阶函数可以使代码更具可读性，清晰表达意图。

  3. 函数复用：
    - 可以将处理逻辑封装成函数，便于在多个地方复用。

  4. 避免副作用：
    - 高阶函数通常返回新数组而不修改原数组，符合函数式编程的原则。

  三、总结
  在JavaScript中，高阶函数为数组操作提供了强大的工具，使得开发者能够以更简洁和优雅的方式处理数据。通过使用map 、 filter 、 reduce 、 forEach等高阶函数，可以有效地实现数据转换、筛选、累加等操作，提升代码的可读性和维护性。
   -->
</head>
<body>

  <script>
    // 1. map()  方法
    const numbers = [1, 2, 3, 4, 5];
    const doubled = numbers.map(num => num * 2);
    console.log("map", doubled); // 输出: [2, 4, 6, 8, 10]

    // 2. filter()  方法
    const numbers2 = [1, 2, 3, 4, 5];
    const evenNumbers = numbers2.filter(num => num % 2 === 0);
    console.log("filter", evenNumbers); // 输出: [2, 4]

    // 3. reduce()  方法
    const numbers3 = [1, 2, 3, 4, 5];
    const sum = numbers3.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    console.log("reduce", sum); // 输出: 15

    // 4. forEach()  方法
    const numbers4 = [1, 2, 3, 4, 5];
    numbers4.forEach(num => console.log(num)); // 输出: 1, 2, 3, 4, 5

    // 5. sort()  方法
    const numbers5 = [5, 3, 1, 4, 2];
    numbers5.sort((a, b) => a - b);
    console.log("sort", numbers5); // 输出: [1, 2, 3, 4, 5]

    // 6. reverse()  方法
    const numbers6 = [1, 2, 3, 4, 5];
    numbers6.reverse();
    console.log("reverse", numbers6); // 输出: [5, 4, 3, 2, 1]

    // 7. slice()  方法
    const numbers7 = [1, 2, 3, 4, 5];
    const sliced = numbers7.slice(1, 3);
    console.log("slice", sliced); // 输出: [2, 3]

    // 8. splice()  方法
    const numbers8 = [1, 2, 3, 4, 5];
    numbers8.splice(2, 1);
    console.log("splice", numbers8); // 输出: [1, 2, 4, 5]

    // 9. find() 方法
    const numbers9 = [1, 2, 3, 4, 5];
    const found = numbers9.find(num => num > 3);
    console.log("find", found); // 输出: 4

    // 10. findIndex()  方法
    const numbers10 = [1, 2, 3, 4, 5];
    const index = numbers10.findIndex(num => num > 3);
    console.log("findIndex", index); // 输出: 3

    // 11. every()  方法
    const numbers11 = [1, 2, 3, 4, 5];
    const allEven = numbers11.every(num => num % 2 === 0);
    console.log("every", allEven); // 输出: false

    // 12. some()  方法
    const numbers12 = [1, 2, 3, 4, 5];
    const someEven = numbers12.some(num => num % 2 === 0);
    console.log("some", someEven); // 输出: true

    // 13. 综合练习
    const numbers13 = [11, 22, 32, 41, 53, 88, 99, 32, 66, 77];
    // 过滤所有的偶数, 映射所有偶数的三次方平方, 并且计算他们的和
    const result = numbers13.filter(num => num % 2 === 0)
                            .map(num => num ** 3)
                            .reduce((prve, next) => prve + next, 0);
    console.log("综合练习", result); // 输出: 1045152


  </script>
  
  
</body>
</html>